<template>
	<view class="cascaderMuilte" style="width: 750rpx;">
		<cascader-panel :idKey="idKey" :labelKey="labelKey" ref="cNode" :width="width" :height="height" :chiledWidth="chiledWidth" :value="checkedValue" class="cascaderMuilteGrow" :optionsData="_optionsData" ></cascader-panel>
	</view>
</template>

<script>
	import cascaderPanel from "./cascader-panel.vue"
	import {flatNodes,getNodeRouter,getNodeParent,menuListFilter} from "./util.js"
	
	export default {
			components:{cascaderPanel},
			name:"cascaderMuilte",
			props:{
				// 是否允许选中父节点。
				selectParentChild:{
					type:Boolean,
					default:false
				},
				// 组件整体的宽度
				width:{
					type:Number,
					default:750
				},
				//组件整体的高度
				height:{
					type:Number,
					default:500
				},
				//子项目的宽度
				chiledWidth:{
					type:Number,
					default:250
				},
				//默认选中的值
				defaultValue:{
					type:Array,
					default:()=>[]
				},
				//
				checkedData:{
					type:Array,
					default:()=>[]
				},
				//id的映射字段
				idKey:{
					type:String,
					default:"id"
				},
				labelKey:{
					type:String,
					default:"label"
				},
				// 数据
				optionsData:{
					type:Array,
					default:()=>[]
				}
			},
			data() {
				return {
					checkedValue:[],
					nowCheckValue:[]
				}
			},
			watch:{
				checkedData:{
					handler(){
						this.checkedValue = this.checkedData;
						if(this.checkedValue.length>0){
							let vl = this.checkedValue[this.checkedValue.length-1];
							this.setParenValue(vl)
							this.$nextTick(()=>{
								this.$refs.cNode.defaultChildrenParent()
							})
						}
					},
					deep:true
				},
				optionsData:{
					handler(){
						
					},
					deep:true
				}
			},
			provide(){
				return {
					"CASCADER_CHECKED":this.getc,
					"CASCADER_NowCheckValue":this.getcNowCheckValue,
				}
			},
			created() {
				this.checkedValue = [...this.defaultValue]
				if(this.checkedValue.length>0){
					let vl = this.checkedValue[this.checkedValue.length-1];
					this.setParenValue(vl)
				}
			},
			computed:{
				_flatListNodes(){
					return flatNodes(this._optionsData)
				},
				_checkedValue(){
					return this.checkedValue;
				},
				_optionsData(){
					return this.optionsData
				}
			},
			mounted() {
				this.$nextTick(()=>{
					this.$refs.cNode.defaultChildrenParent()
				})
			},
			methods: {
				getc(){
					return this.checkedValue;
				},
				getcNowCheckValue(){
					return this.nowCheckValue;
				},
				setParenValue(value){
					this.nowCheckValue = getNodeRouter(this._optionsData,value,[],this.idKey)
				},
				addValue(value){
					let t = this
					let ar = new Set([...this._checkedValue])
					if(ar.has(value)){
						ar.delete(value)
					}else{
						ar.add(value)
					}
					this.checkedValue = [...ar]
					
					// 这里返回节点对象数据和值。
					let arr = [];
					this.checkedValue.forEach(el=>{
						arr.push(menuListFilter(t._optionsData,el,t.idKey))
					})
					
					this.$emit('change',this.checkedValue,arr)
					this.$emit('update:checkedData',this.checkedValue)
				}
			}
		}
	</script>
</script>

<style>
	@import url(font.css);
	.cascaderMuilte{
		display: flex;
		flex-shrink: 1;
		flex-direction: row;
	}
	.cascaderMuilteGrow{
		flex-grow: 1;
		flex-shrink: 1;
	}
</style>